import React, { Component } from 'react';
import { Scroller, Touchable } from '$yo-component';
import Header from '$component/header/index.js';
import yoHistory from '$common/history';
import './index.scss';

import fetch from 'isomorphic-fetch'
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk'
import fetchReducer from '../fetchReducer'
import infojson from './info.json';

// const getData = postTitle => (dispatch, getState) => {
//     dispatch({
//         type: postTitle + "_START"
//     })
//     fetch('../page/skill/info.json')
//         .then(function (response) {
//             console.log(response.json()) 
//         })
// }


class DetailPage extends Component {
    // fetchData() {
    //      this.props.route.dispatch(getData('FETCH_DATA'))
    // }
    // componentWillMount(){
    //     this.fetchData()
    // }
    render() {
        var infodata = infojson;


        return (
            <div className="yo-flex">
                <Header title="我的技能" />
                <Scroller extraClass="flex" onScroll={() => {
                }}>
                    {/* <button onClick={this.fetchData.bind(this)}>请求数据</button> */}
                    <ul class="yo-list yo-list-group">
                        {
                            infodata.map((item, index) =>


                                <li className="item itemheight" key={index}>
                                    <div className='pleft'>
                                        {<img src={item.photo} className='imgsize' />}
                                    </div>
                                    <div className="pright">
                                        <h4>{item.category}</h4>
                                        <p>{item.name}</p>
                                    </div>
                                </li>

                            )
                        }
                    </ul>
                    {/* <div className="yo-list">
                        {
                            new Array(100).fill('').map((item, index) =>
                                <div className="item" key={index}>
                                    <div className="mark">详情图片 {item.img}:</div>
                                    <div className="flex">
                                        <Scroller.LazyImage height="100"
                                            src={`//placeholdit.imgix.net/~text?txtsize=33&bg=666&txtclr=fff&txt=${index}&w=100&h=100`} />
                                    </div>
                                </div>
                            )
                        }
                    </div> */}
                </Scroller>

                <ul className="yo-tab yo-tab-view">
                    <li className="item item-y-ico">
                    <Touchable
                    touchClass="touchable-highlight"
                    onTap={() => {
                        yoHistory.push('/');
                    }}
                >
                    <div className='tabitem'>
                        首页
          </div>
                </Touchable>

                    </li>
                    <li className="item item-y-ico item-on">
                        <Touchable
                            touchClass="touchable-highlight"
                            onTap={() => {
                                yoHistory.push('/skill');
                            }}
                        >
                            <div className='tabitem'>
                                技能
    </div>
                        </Touchable>
                    </li>
                    <li className="item item-y-ico">
                        <Touchable
                            touchClass="touchable-highlight"
                            onTap={() => {
                                yoHistory.push('/project');
                            }}
                        >
                            <div className='tabitem'>
                                项目
    </div>
                        </Touchable>
                    </li>
                    <li className="item item-y-ico">
                        <Touchable
                            touchClass="touchable-highlight"
                            onTap={() => {
                                yoHistory.push('/minemy');
                            }}
                        >
                            <div className='tabitem'>
                                我的
</div>
                        </Touchable>
                    </li>
                </ul>
            </div>
        )
    }
}

export default DetailPage;
